<template>
  <div class="side-nav">
    <el-menu>
      <el-menu-item
        v-for="v in menuList"
        :key="v.id"
        @click.native="handleClick(v)"
        :class="{ active: v.id == idx }"
      >
        <span>{{ v.name }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      idx: '1',
      menuList: [
        { id: 1, route: 'info', name: '基础信息' },
        { id: 2, route: 'resource', name: '参评资源' },
        { id: 3, route: 'team', name: '专家成员' },
        { id: 4, route: 'score', name: '评分标准' },
        { id: 5, route: 'result', name: '评审意见' },
        // { id: 6, route: 'result', name: '分数统计' },
      ],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let curRoute = this.$route.name
      this.idx = this.menuList.filter(
        (v) => curRoute.indexOf(v.route) != -1,
      )[0].id
    },
    handleClick(data) {
      this.idx = data.id
      let name = 'review-' + data.route
      this.$router.push({ name })
    },
  },
}
</script>
<style scoped>
.side-nav {
  height: 800px;
}
.side-nav >>> .el-menu {
  border-right: 0 none;
}
.side-nav .el-menu-item {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ededed;
}
.side-nav .el-menu-item.active {
  color: var(--colorA1);
  background-color: var(--colorHover1);
}
</style>